<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import {showToast} from 'vant';

import { areaList } from '@vant/area-data';

const router = useRouter();

import headerUtil from "./base/common/headerUtil.vue";
import reqApis from '../req/reqApis.js';
import Client from '../req/common.js';

const chosenAddressId = ref('1');

const currentData = ref<any>({
  headerObj:{
    showType: 2
  },
  addressInfo: {
    id: router.currentRoute.value.query.addressId,
    name: "",
    tel: "",
    city: "",
    county: "",
    country: "",
    province: "",
    areaCode: "",
    isDefault: false,
    addressDetail: "",
  }
});


const searchResult = ref([]);

const onSave = (content:any) => {
  reqApis.saveAddressApi(content).then(res => {
    showToast("操作成功")
    router.push("/addressList");
  })  
};
const onDelete = (obj:any) => {
  reqApis.deleteAddressApi({id:obj.id}).then(res => {
    showToast("操作成功")
    router.push("/addressList");
  })
}

const initAddress = () => {
  if(currentData.value.addressInfo.id != null) {
    reqApis.getAddressByIdApi({id: currentData.value.addressInfo.id}).then(res => {
      if(res.data != null) {
        currentData.value.addressInfo = res.data;
      }
    })  
  }
}

initAddress();


</script>

<template>
  <section class="address">
    <headerUtil :obj="currentData.headerObj">地址管理</headerUtil>
    <div class="content">
      <van-address-edit
        :address-info="currentData.addressInfo"
        :area-list="areaList"
        :show-delete="currentData.addressInfo.id != null"
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
    

  </section>
</template>

<style lang="less" scoped>
.address {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    background: white;
    .user {
      padding: .12rem .1rem;
      display: flex;
      align-items: center;
      position: relative;
      &::after {
        width: 3.65rem;
        height: 0;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border-bottom: .01rem solid #e5e5e5;
      }
      .face {
        width: .5rem;
        height: .5rem;
        margin-right: .1rem;
        background-size: cover!important;
        border-radius: 50%;
      }
      .info {
        color: #999;
        font-size: .14rem;
        .name {
          margin-bottom: .1rem;
          color: #666;
        }
      }
      
    }
    .logout {
      height: .44rem;
      padding: .3rem .1rem;
    }
    .item {
      height: .44rem;
      padding: 0 .1rem;
      display: flex;
      align-items: center;
      font-size: .14rem;
      color: #999;
      position: relative;
      label {
        color: #222;
        padding-right: .1rem;
      }
      input {
        flex: 1;
      }
      &.title {
        color: #666;
        &::before {
           border: none;
        }
      }
      // &::before {
      //   width: .1rem;
      //   height: .1rem;
      //   content: "";
      //   border-top: .01rem solid #666;
      //   border-left: .01rem solid #666;
      //   transform-origin: 50%;
      //   position: absolute;
      //   top: 50%;
      //   margin-top: -.06rem;
      //   right: .2rem;
      //   transform: rotate(135deg);
      // }
      &::after {
        width: 3.65rem;
        height: 0;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border-bottom: .01rem solid #e5e5e5;

      }
    }
  }
}
</style>
